import React, { useState, useEffect } from 'react'
import axios from 'axios'
import './Searchfair.css'
import { useNavigate, useLocation } from 'react-router-dom'
import { NavBar, SearchBar, Toast, Space, Button, Tabs } from 'antd-mobile'
export default function Searchfair() {
    const navigate = useNavigate()
    const location = useLocation()
    const [value, setValue] = useState('')
    const back = () => {
        navigate(-1)
    }
    const [commodity, setcommodity] = useState([])
    const getcommodity = () => {
        axios.get('http://localhost:3000/getcommodity').then((res => {
            if (res.data.code == 200) {
                console.log(res.data)
                setcommodity(res.data.data)
            }
        }))
    }
    useEffect(() => {
        setValue(location.state.value)
        getcommodity()
    }, [])
    return (
        <div className='searchfair'>
            <div className='fair_top'>
                <div className='serchfair_nav'>
                    <NavBar right={<img src='../../../public/fair/search.png' />} onBack={back} >
                        <SearchBar placeholder='寻找商品' searchIcon={<img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u106.svg"></img>}
                            style={{
                                width: '99%',
                                '--height': '2.5rem',
                                '--border-radius': '2rem',
                            }} />
                    </NavBar>
                </div>
                <div className='searchfair_nav'>
                    <Tabs style={{
                        "--active-line-color": "rgb(13, 148,206 )",
                        "--active-title-color": 'black',
                    }}>
                        <Tabs.Tab title='综合' key='fruits' />
                        <Tabs.Tab title='销量' key='vegetables' />
                        <Tabs.Tab title={<div>价格 <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%90%9C%E7%B4%A2%E5%B8%82%E9%9B%86/u1411.svg'></img></div>} key='animals' />
                    </Tabs>
                </div>

            </div>
            <div className='fair_content'>
                <div className='fair_context'>
                    {
                        commodity.map((item, index) => {
                            return (
                                <div className='fair_context_item' key={index}>
                                    <img src={item.img}></img>
                                    <p className='fair_context_item_name'>{item.name}</p>
                                    <div className='fair_context_item_price'>
                                        <p>￥{item.price}</p>
                                        <p className='fair_context_item_sold'>已售{item.sold}</p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}
